<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>easing 用法</title>
    <style>
        div{
            width:100px;
            height:100px;
            position: absolute;
        }
        .div1{
            left: 50px;
            top: 10px;
            background: #0f0;
        }
        .div2{
            left: 50px;
            top: 150px;
            background: #0ff;
        }
    </style>
    <script src="./js/tween.js"></script>
    <script src="./js/animation.js"></script>
</head>
<body>
    <!--单个用法-->
    <div class="div1"></div>
    <script>
        /*
            缓动函数
            t: 当前时间
            b: 初始值
            c: 变化量
            d: 持续时间
        */ 
        var div = document.querySelector('.div1');
        var t = 5,
            b = 50,
            c = 150,
            d = 100;
        function run(){
            var val = Tween.Back.easeOut(t,b,c,d);
            div.style.left = Math.ceil(val) + 'px';
            if(t<d){
                t++;
                setTimeout(run,10);
            }
        }
        run();
    </script>

    <!--合成用法-->
    <div class="div2"></div>
    <script>
        var div2 = document.querySelector('.div2');
        Math.animation(50,500,1000,'Bounce.easeOut',function(val,ifOk){
            console.log(arguments);
            div2.style.left = val + 'px';
        })
    </script>

</body>
</html>